<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>树形表格</title>
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
  <table class="easyui-treegrid" style="width: 700px; height: 350px"
    data-options="url: 'treegrid.json', idField: 'id', treeField: 'text', loadFilter: filter, animate: true">
    <thead>
      <tr>
        <th data-options="field: 'id', width: 80">节点编号</th>
        <th data-options="field: 'text', width: 120">节点名称</th>
        <th data-options="field: 'identifier', width: 40">标识</th>
        <th data-options="field: 'userName', align: 'right', width: 350">用户名</th>
        <th data-options="field: 'age', width: 40">年龄</th>
        <th data-options="field: 'registrationTime', width: 90">注册时间</th>
      </tr>
    </thead>
  </table>
  <table id="treegrid"></table>
  <script type="text/javascript">
  function filter(data) {
    return data.records;
  }
  $(function () {
    $("#treegrid").treegrid({
      style: {
        width: 700
      },
      idField: "id",
      treeField: "text",
      url: 'treegrid.json',
      //数据网格列配置对象，详见列属性说明中更多的细节
      columns: [[
        {
          field: "id",
          title: "节点编号",
          width: 80
        }, {
          field: "text",
          title: "节点名称",
          width: 120
        }, {
          field: "identifier",
          title: "标识",
          width: 40
        }, {
          field: "userName",
          title: "用户名",
          width: 350
        }, {
          field: "age",
          title: "年龄",
          width: 40
        }, {
          field: "registrationTime",
          title: "注册时间",
          width: 90
        }
      ]],
      animate: true,
      loadFilter: filter
    })
  })
  </script>
</body>
</html>